<template>
  <div class="common-page layout-view">
    <div class="case-block">
      <div class="title">width的关键字属性值</div>
      <div class="sample a">
        <div class="sample-wrap">
          <p>width: min-content</p> 
          <div class="model1">
            <img src="../../../../assets/img/jizhi.png" alt="">
            <div>
              {{ testStr }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="case-block">
      <div class="title">根据兄弟元素的数量来设置样式</div>
      <div class="sample b">
        <div> 当元素的数量等于某个数时元素样式自动改变 <button @click="addDom">{{ domNum === 8 ? '减少为6个' : '增加到8个' }}</button></div>
        <div> 选择器为： <em style="color: red">&:first-child:nth-last-child<strong>(8)</strong>, &:first-child:nth-last-child<strong>(8)</strong> ~ div</em> </div>  
        <div class="sample-wrap first">
          <div v-for="i in domNum" :key="`a${i}`">{{ i }}</div>
        </div>
        <h4>根据兄弟元素的数量范围来改变元素的样式</h4>
        <div>当下面的div个数 大于 8个时， 全部变成蓝色</div>
        <div> 选择器为： <em style="color: red">&:first-child:nth-last-child<strong>(n + 8)</strong>, &:first-child:nth-last-child<strong>(n + 8)</strong> ~ div</em> </div>
        <div class="sample-wrap second">
          <div v-for="i in (domNum + 1)" :key="`b${i}`">{{ i }}</div>
        </div>
        <div>
          元素个数大于等于5时，第五个以及后面的元素选中：
          <em style="color: red">
            &:nth-child(n + 5)
          </em>  
        </div>
        <div class="sample-wrap third">
          <div v-for="i in 5" :key="`c${i}`">{{ i }}</div>
        </div>
        <div>当元素少于等于3个时，让选择器命中</div>
        <div class="sample-wrap forth">
          <div v-for="i in (10 - domNum)" :key="`d${i}`">{{ i }}</div>
        </div>  
      </div>
    </div>

    <div class="case-block">
      <div class="title">满屏背景 内容固定宽度 居中显示</div>
      <div>下面实现了一个容器背景100%， 内容区域 max-width：600px, 并且居中 的效果</div>
      <div class="sample c">
        <p style="color:white">{{ testStr }}</p>
      </div>
    </div>

    <div class="case-block">
      <div class="title">元素内崔志居中</div>
      <div class="sample d">
        <div>{{ testStr }}</div>
      </div>
    </div>

    <div class="case-block">
      <div class="title">粘性底部（sticky footer）</div>
      <div class="sample e">
        <h3 style="text-align:center">这个是标题</h3>
        切换内容显示隐藏 <input class="toggle" type="checkbox" />  
        <div class="main"> 
          下面是内容：
          <div v-for="i in 20" :key="i">{{ testStr }}</div> 
        </div>
        <div class="footer"> this is a footer </div>
      </div>
    </div> 

    <div class="case-block">
      <div class="title">table-layout: fixed / auto</div>
      
      <div class="sample f">
        <div class="sample-wrap first">
          切换table-layout: auto / fixed(checked) <input class="toggle" type="checkbox" />
          <table style="">
            <tr>
              <td>If we don’t…</td>
              <td>specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the more content here is much wider.</td>
            </tr>
          </table>

          <table>
            <tr>
              <td>If we don’t…</td>
              <td>specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the more content here is much wider.</td>
            </tr>
            <tr>
              <td>All rows take part in calculating the widths, not just the first one.</td>
              <td>Notice how the dimensions here are different than the previous example.</td>
            </tr>
          </table>
        </div>
        <h3>table-layout：fixed 且 td 设置 width: 200px</h3>
        <table style="table-layout:fixed">
          <tr>
            <td style="width: 200px">If we don’t…</td>
            <td>specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the more content here is much wider.</td>
          </tr>
        </table>
      </div>
    </div>         
  </div>
</template>
<style scoped lang="stylus">
@import '../../../../styles/mixins.styl'

.case-block
  width 100%
  padding 10px;
  border-bottom 1px solid lightgray
  .title
    font-size: 18px
    font-weight bold
.sample.a
  .sample-wrap
    width 100%
    .model1
      max-width 350px
      display: block
      max-width: min-content
      margin 0 auto
      border 1px solid blue
      img
        max-width inherit
        display: block;

.sample.b
  .sample-wrap
    display: flex
    padding 10px
    div
      width: 100px
      height: 100px
      margin 5px
  .sample-wrap.first
    div
      background red
      &:first-child:nth-last-child(8), &:first-child:nth-last-child(8) ~ div
        background green
  .sample-wrap.second
    div
      background red
      &:first-child:nth-last-child(n + 8), &:first-child:nth-last-child(n + 8) ~ div
        background blue
  .sample-wrap.third
    div
      background red
      &:nth-child(n + 5)
        background yellow
  .sample-wrap.forth
    div
      background red
      &:first-child:nth-last-child(-n + 3), &:first-child:nth-last-child(-n + 3) ~ div
        background green

.sample.c
  // background: red;
  height 150px
  // padding: 10px;
  padding: 10px calc(50% - 300px);
  background: #333; 
.sample.d
  display flex
  width 350px
  height 350px
  margin 0 auto
  align-items center
  justify-content: center;
  border 1px solid red
  div
    width 50%
    padding 10px;
    background orange
.sample.e
  display: flex;
  flex-flow: column;
  width 70%
  height 400px;
  overflow auto
  border 1px solid red
  .toggle:checked ~ .main > div
    display none
  .main
    flex 1
    width 98%
    margin: 0 auto
    border: 1px solid blue
  .footer
    padding 10px
    font-weight bold
    text-align: center
    color white
    background green
.sample.f
  table
    border-collapse: collapse;
    margin-bottom: 10px;
    width: 100%;
    td
      border 1px solid #aaa
  .sample-wrap
    width 100%
    
    .toggle:checked ~ table
      table-layout fixed 
</style> 
<script>
export default {
  name: 'LayoutView',
  props: {

  },
  data () {
    return {
      Str: '测',
      domNum: 6,
      showVertiCBox: false
    }
  },
  computed: {
    testStr() {
      let str = ''
      for (let i = 0; i <= 100; i++) {
        str += this.Str
      }
      return str
    }
  },
  created() {
  },
  mounted() {
     
  },
  methods: {
    addDom() {
      this.domNum = this.domNum === 8 ? 6 : 8
    }
  }
}
</script>
